
<template>
  <el-dialog
    :visible.sync="visible"
    title="导入"
    :close-on-click-modal="false"
    customClass="customWidth import"
    :close-on-press-escape="false"
    width="40%"
  >
    <div class="islation">
      <div>
        <img
          src="~@/assets/img/import.png"
          alt=""
          style="height: 140px;"
        />
      </div>
      <div class="import">
        <span style="font-size: 16px">商品导入字段有:</span>
        <p style="margin-top: 10px; line-height: 20px">
          名称,信息,价格等
        </p>
        <div class="btn">
          <span style="margin-right: 15px">
            <el-button type="primary" @click="downLoadExlce()"
              >下载导入模板</el-button
            >
          </span>
          <span>
            <el-upload
              :action="uploadUrl"
              :on-progress="progress"
              :on-success="importStaff"
              :limit="3"
              :file-list="fileList"
              :show-file-list="false"
              accept=".xlsx, .xls"
              with-credentials
            >
              <el-button type="primary" class="text" style="vertical-align: top;"> 导入 </el-button>
              <el-progress
                v-if="videoFlag == true"
                type="circle"
                :percentage="videoUploadPercent"
                style="margin-top: 30px"
              ></el-progress>
            </el-upload>
          </span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
  //入馆预约 booktickets
import Cookies from "js-cookie";
export default {
  data() {
    return {
      videoFlag: false,
      videoUploadPercent: "",
      visible: false,
      uploadUrl: "",
      fileList: [],
    };
  },
  props:['type'],
  methods: {
    init() {
      this.uploadUrl = `${
        window.SITE_CONFIG["apiURL"]
      }/scenic/newsProduct/import?access_token=${Cookies.get("access_token")}`;
      this.visible = true;
    },
    // 上传文件的钩子
    progress(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage.toFixed(0));
      if (event.isTrusted === true) {
      } else {
        this.$message({
          message: "上传失败,请重新上传!",
          type: "error",
          offset: 100,
          customClass: "message-index",
        });
      }
    },
    // 下载模板
    downLoadExlce() {
      window.location.href = `${
        window.SITE_CONFIG["apiURL"]
      }/scenic/newsProduct/mode?access_token=${Cookies.get("access_token")}`;
    },
    // 导入成功
    importStaff(response, file, fileList) {
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      this.$alert(response.msg, "提示", {
        confirmButtonText: "确定",
      });
      // 清空上传列表
      this.fileList = [];
      this.visible = false;
      this.$emit("refreshDataList");
    },
  },
};
</script>
<style lang="scss"scoped >
.customWidth.import {
  width: 35%;
}
.islation {
  display: flex;
  justify-content: flex-start;
  height: 100%;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 20px;
  .import {
    margin-left: 50px;
  }
  .btn {
    display: flex;
    margin-top: 50px;
  }
}
</style>
